<template>
    <div style="padding: 30px">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="small"
                    @click="dialogVisible = true"
                    >添加</el-button
                >
            </div>
            <el-table :data="brandList" border style="width: 100%">
                <el-table-column width="80" label="序号" type="index">
                </el-table-column>
                <el-table-column prop="tmName" label="品牌名称" width="280">
                </el-table-column>
                <el-table-column prop="logoUrl" label="品牌logo" width="380">
                    <template slot-scope="scope">
                        <img :src="scope.row.logoUrl" alt="" height="70" />
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            @click="startEditBrand(scope.row)"
                            type="warning"
                            icon="el-icon-edit-outline"
                            size="mini"
                            style="margin: 0 10px"
                        ></el-button>
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            @click="deleteBrand(scope.row.id)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="margin-top: 20px"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :page-count="pageCount"
            >
            </el-pagination>
        </el-card>
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            :title="dialogText"
            :visible.sync="dialogVisible"
            width="70%"
        >
            <el-form
                :model="addBrandData"
                :rules="rules"
                ref="ruleForm"
                :inline="true"
                class="demo-form-inline"
            >
                <el-form-item label="活动名称" prop="tmName">
                    <el-input
                        size="mini"
                        v-model="addBrandData.tmName"
                    ></el-input>
                </el-form-item>
                <br />
                <el-form-item label="品牌LOGO" prop="logoUrl">
                    <el-upload
                        action="http://gmall-h5-api.atguigu.cn/admin/product/upload"
                        class="avatar-uploader"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        >
                        <img
                            v-if="addBrandData.logoUrl"
                            :src="addBrandData.logoUrl"
                            class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearBrandData">取 消</el-button>
                <el-button type="primary" @click="addOrEditBrand(addBrandData)"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import _ from "lodash";
import {
    reqGetBrandList,
    reqAddBrand,
    reqEditBrand,
    reqDeleteBrand,
} from "@/api/brandList";
export default {
    data() {
        return {
            brandList: [],
            currentPage: 1,
            pageSize: 5,
            dialogVisible: false,
            addBrandData: {
                id: -1,
                logoUrl: "",
                tmName: "",
            },
            dialogText: "添加品牌",
            pageCount: -1,
            rules: {
                tmName: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                logoUrl: [
                    {
                        required: true,
                        message: "请选择活动区域",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        // 获取品牌分页列表
        async getBrandList(currentPage, pageSize) {
            try {
                const re = await reqGetBrandList(currentPage, pageSize);
                this.brandList = _.clone(re.data.records);
                this.pageCount = Math.ceil(re.data.total / this.pageSize);
                this.$notify.success("获取分页列表成功");
            } catch (error) {
                this.$notify.error(error.message);
            }
        },
        // 初始化数据
        initData() {
            this.getBrandList(this.currentPage, this.pageSize);
        },

        // 上传图片
        handleAvatarSuccess(res, file) {
            // console.log("res", res, "file", file);
            this.addBrandData.logoUrl = res.data;
        },
        async beforeAvatarUpload(file) {
            // console.log("before", file);
        },

        //发送添加或修改商品请求
        async addOrEditBrand(row) {
            try {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$notify.success("校验成功");
                    } else {
                        this.$notify.error("校验失败");
                        return false;
                    }
                });

                if (row.id !== -1) {
                    this.dialogText = "修改品牌";
                    await reqEditBrand(row);
                    this.initData();
                } else {
                    this.dialogText = "添加品牌";
                    await reqAddBrand(row);
                    this.initData();
                }
                this.clearBrandData();
                this.$notify.success("添加或修改商品成功");
            } catch (error) {
                this.$notify.error(error.message);
            }
        },
        // 开启修改商品页面
        async startEditBrand(row) {
            this.dialogVisible = true;
            this.addBrandData.id = row.id;
            this.addBrandData.tmName = row.tmName;
            this.addBrandData.logoUrl = row.logoUrl;
        },
        // 清除brandData数据
        clearBrandData() {
            this.addBrandData = {
                id: -1,
                logoUrl: "",
                tmName: "",
            };
            this.dialogVisible = false;
        },

        // 删除品牌
        async deleteBrand(id) {
            try {
                await reqDeleteBrand(id);
                this.initData();
                this.$notify.success("删除品牌成功");
            } catch (error) {
                this.$notify.error(error.message);
            }
        },
    },
    mounted() {
        this.initData();
    },
    watch: {
        currentPage(newVal, oldVal) {
            this.initData();
        },
    },
};
</script>

<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
